<template>
<div class="mainContent">
  <pathTracking :path="Model.path" />
  <div class="container">
    <div class="bgWhite bgRadius">
      <el-row>
        <div class="common-table-title">
          <div class="common-table-icon"></div>
          <div class="common-table-fl">查询条件</div>
        </div>
      </el-row>
      <!-- 高级搜索 -->
      <advancedSearch :option="Model.filterOption" @getChild="getFilterData" @onSearch="onFilterSearch" @onClear="onFilterClear" @onExport="onFilterExport"></advancedSearch>
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-row>
        <div class="common-table-title">
          <div class="common-table-icon"></div>
          <div class="common-table-fl">
            <span>待发货列表</span>
          </div>
          <div class="common-btn-group">
            <div class="common-table-btn-item" @click="onTableExport">导出</div>
            <div class="common-table-btn-item" @click="onDelivery()">批量发货</div>
          </div>
        </div>
      </el-row>
      <el-table :data="Model.tableData" border style="width: 100%;"  @selection-change="onTableSelectionChange">
        <el-table-column type="selection" width="50" fixed></el-table-column>
        <el-table-column fixed="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="barcode" label="条码" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="toTableDetail(scope.row.barcode,'beShippedDetail')">{{scope.row.barcode}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="purchaseNumber" label="采购单号" width="200"></el-table-column>
        <el-table-column prop="typeOfPurchaseVoucher" label="采购类型" width="120"></el-table-column>
        <el-table-column prop="modelNo" label="款号" width="200"></el-table-column>
        <el-table-column prop="customNumber" label="定制编号" width="120"></el-table-column>
        <el-table-column prop="categoryName" label="品类" width="120"></el-table-column>
        <el-table-column prop="description" label="描述" width="300"></el-table-column>
        <el-table-column prop="theLettering" label="刻字" width="120"></el-table-column>
        <el-table-column prop="deliverStatusName" label="发货状态" width="120"></el-table-column>
        <el-table-column prop="qualityStatusName" label="质检状态" width="120"></el-table-column>
        <el-table-column prop="purchaseNumber" label="结算单号" width="120"></el-table-column>
        <el-table-column prop="qualityTime" label="质检完成时间" width="200"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <div class="btnGroup">
              <div class="operate-btn" @click="onDelivery(scope.row)">发货</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-row class="pagination-cont">
      <el-pagination @size-change="onTableSizeChange" background @current-change="onTableCurrentChange" :current-page="Model.pager.params.pageIndex" :pager-count="5" :page-sizes="Model.pager.pageSizeArr" :page-size="Model.pager.params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="Model.pager.pageTotal"></el-pagination>
    </el-row>
  </div>
</div>
</template>

<script>
import pathTracking from "@/components/common/pathTracking";
import pagination from "@/components/common/pagination.vue";
import card from "@/components/common/filterBtns";
import advancedSearch from "@/components/common/filter/advancedSearch";

import Model from "./model.js";
import Controller from "./controller.js";
export default {
  name: "purchase",
  mixins: [Model, Controller],
  components: {
    advancedSearch,
    pagination,
    pathTracking,
    card
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
@import "./index.less";
</style>
